<template>
    <div class="relationship-page">
        <!-- 使用复用标题介绍组件 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 输入框 -->
            <el-input
                    v-model="inputText"
                    placeholder="请输入关系"
                    clearable
                    class="input-area"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 6 }"
            />

            <!-- 普通按钮九宫格 -->
            <div class="grid-box normal-buttons">
                <button
                        v-for="(word, index) in normalWords"
                        :key="'normal-' + index"
                        class="grid-button"
                        :class="{ 'odd-button': (index + 1) % 2 === 1 }"
                        @click="handleClick(word)"
                >
                    {{ word }}
                </button>
            </div>

            <!-- 特殊按钮 -->
            <div class="special-buttons-container">
                <div class="grid-box special-buttons">
                    <button
                            v-for="(word, index) in specialWords"
                            :key="'special-' + index"
                            class="grid-button special-button"
                            @click="handleClick(word)"
                    >
                        {{ word }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {post, get} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'

const inputText = ref('')
const normalWords = ref([])
const specialWords = ['的', 'C', '=']

const title = ref('')
const subtitle = ref('')

// 获取按钮内容
function loadButtons() {
    post(
        '/api/lifeTool/Relation',
        {},
        (data) => {
            if (Array.isArray(data)) {
                normalWords.value = data
            } else {
                console.error('后端返回格式异常，期望数组')
            }
        },
        (msg) => {
            console.error('获取普通按钮失败：' + msg)
        }
    )
}

// 获取标题和介绍
function loadTitleAndSubtitle() {
    get(
        '/api/lifeTool/getInfo?path=Relationship',
        (data) => {
            if (data) {
                title.value = data.title || title.value
                subtitle.value = data.introduction || subtitle.value
            }
        },
        (msg) => {
            ElMessage.error('获取工具信息失败：' + msg)
        }
    )
}

// 按钮点击逻辑
function handleClick(word) {
    if (word === '=') {
        if (!inputText.value.trim()) {
            ElMessage.warning('请输入内容再计算')
            return
        }

        post(
            '/api/lifeTool/Relationship',
            {text: inputText.value},
            (data) => {
                inputText.value = data.result || ''
            },
            (msg) => {
                console.error('请求失败：' + msg)
            }
        )
    } else if (word === 'C') {
        inputText.value = ''
    } else {
        inputText.value += word
    }
}

// 页面加载
onMounted(() => {
    loadButtons()
    loadTitleAndSubtitle()
})
</script>

<style scoped>
.relationship-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.input-area {
    width: 100%;
    font-size: 1.1rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

.grid-box.normal-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.75rem, 5rem));
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    margin-top: 1rem;
    max-width: 35rem;
    margin-left: auto;
    margin-right: auto;
}

.special-buttons-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    width: 100%;
}

.grid-box.special-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(3.75rem, 5rem));
    gap: 0.5rem;
    justify-content: center;
}

.grid-button {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid #dcdfe6;
    background-color: white;
    color: black;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: 0.2s;
    border-radius: 0.5rem;
}

.grid-button:hover {
    border-color: #409eff;
    color: #409eff;
}

.special-button {
    background-color: orange;
    color: black;
}

.odd-button {
    background-color: #f2f2f2;
}
</style>